<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/>
    <title>我的订单</title>
    <meta name="keywords" content="关键词,5个左右,单个8汉字以内">
    <meta name="description" content="网站描述，字数尽量空制在80个汉字，160个字符以内！">
    <link rel="Bookmark" href="favicon.ico">

    <link href="../css/reset.css" rel="stylesheet" type="text/css"/>
    <link href="../css/style.css" rel="stylesheet" type="text/css"/>
    <link href="../css/dateSelect.css" rel="stylesheet" type="text/css"/>
</head>

<body>

<#include "../common/header.ftl" />
<@person></@person>

<@personheader></@personheader>

<div class="container cf accortop">
<#include "../common/personnavigation.ftl" />
<@personnavigation></@personnavigation>
    <!---->
    <div class="orderlist">
        <h1>我的订单</h1>
        <div class="tab">
            <div class="tab-menu">
                <ul>
                    <li class="active">所有订单</li>
                    <li>待付款</li>
                    <li>已配送</li>
                </ul>

                <div class="form-group">
                    <input type="text" class="form-control" placeholder="订单号/收货人姓名/快递单号">
                    <button type="submit" class="btn btn-primary">搜索</button>
                </div>

            </div>
            <div class="dgeg">
                <span>时间：</span>
                <input type="text" id="date" class="date" placeholder="开始时间">
                <input type="text" id="date2" class="date" placeholder="结束时间">
                <input type="button" class="ss" value="搜索"/>
            </div>
            <div class="tab-box">
                <div class="tablist component">
                    <table>
                        <thead>
                        <tr>
                            <th>订单编号</th>
                            <th>收货信息</th>
                            <th>数量</th>
                            <th>运费(元)</th>
                            <th>其他费用(元)</th>
                            <th>订单总价(元)</th>
                            <th>订单状态</th>
                            <th>备注</th>
                            <th>下单时间</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <#if hfOrderes??>
                        <#list hfOrders as hfOrder>
                        <tr>
                            <td>${hfOrder.smallOrderId}</td>
                            <td>收货人：张三，广州，15920165578</td>
                            <td>${hfOrder.amount}</td>
                            <td>20.50</td>
                            <td>1000.95</td>
                            <td>${hfOrder.total_money}</td>
                            <td>
                                <#if hfOrder.status==1>
                                    未支付
                                </#if>
                                <#if hfOrder.status==2>
                                    已支付
                                </#if>
                                <#if hfOrder.status==3>
                                 已取消
                                </#if>
                            </td>
                            <td>${hfOrder.comment}/td>
                            <td>${hfOrder.createDate}</td>
                            <td>
                                <a href="orderdetail.html">订单明细</a>
                                <a href="#">付款提醒</a>
                                <a href="javascript:;" class="delBtn">取消订单</a>
                            </td>
                        </tr>
                        </#list>
                        </#if>
                        </tbody>
                    </table>
                </div>
                <div class="tablist component">
                    <table>
                        <thead>
                        <tr>
                            <th>订单编号</th>
                            <th>收货信息</th>
                            <th>数量</th>
                            <th>运费(元)</th>
                            <th>其他费用(元)</th>
                            <th>订单总价(元)</th>
                            <th>订单状态</th>
                            <th>备注</th>
                            <th>下单时间</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>100</td>
                            <td>收货人：张三，广州，15920165578</td>
                            <td>10</td>
                            <td>20.50</td>
                            <td>1000.95</td>
                            <td>10000</td>
                            <td>已付款</td>
                            <td>拿货费用，报关费用</td>
                            <td>2018.6.30</td>
                            <td>
                                <a href="orderdetail.html">订单明细</a>
                                <a href="#">付款提醒</a>
                                <a href="javascript:;" class="delBtn">取消订单</a>
                            </td>
                        </tr>
                        <tr>
                            <td>100</td>
                            <td>收货人：张三，广州，15920165578</td>
                            <td>10</td>
                            <td>20.50</td>
                            <td>1000.95</td>
                            <td>10000</td>
                            <td>已付款</td>
                            <td>拿货费用，报关费用</td>
                            <td>2018.6.30</td>
                            <td>
                                <a href="orderdetail.html">订单明细</a>
                                <a href="#">付款提醒</a>
                                <a href="javascript:;" class="delBtn">取消订单</a>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <div class="tablist component">
                    <table>
                        <thead>
                        <tr>
                            <th>订单编号</th>
                            <th>收货信息</th>
                            <th>数量</th>
                            <th>运费(元)</th>
                            <th>其他费用(元)</th>
                            <th>订单总价(元)</th>
                            <th>订单状态</th>
                            <th>备注</th>
                            <th>下单时间</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>100</td>
                            <td>收货人：张三，广州，15920165578</td>
                            <td>10</td>
                            <td>20.50</td>
                            <td>1000.95</td>
                            <td>10000</td>
                            <td>已付款</td>
                            <td>拿货费用，报关费用</td>
                            <td>2018.6.30</td>
                            <td>
                                <a href="orderdetail.html">订单明细</a>
                                <a href="#">付款提醒</a>
                                <a href="javascript:;" class="delBtn">取消订单</a>
                            </td>
                        </tr>
                        <tr>
                            <td>100</td>
                            <td>收货人：张三，广州，15920165578</td>
                            <td>10</td>
                            <td>20.50</td>
                            <td>1000.95</td>
                            <td>10000</td>
                            <td>已付款</td>
                            <td>拿货费用，报关费用</td>
                            <td>2018.6.30</td>
                            <td>
                                <a href="orderdetail.html">订单明细</a>
                                <a href="#">付款提醒</a>
                                <a href="javascript:;" class="delBtn">取消订单</a>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="fye">
                <ul class="pagination" id="page1">
                    <li>
                        <a aria-label="Previous">«</a>
                    </li>
                    <li>
                        <a>上一页</a>
                    </li>
                    <li class="active">
                        <a>1</a>
                    </li>
                    <li>
                        <a>2</a>
                    </li>
                    <li>
                        <a>3</a>
                    </li>
                    <li>
                        <a>下一页</a>
                    </li>
                    <li>
                        <a aria-label="Next">»</a>
                    </li>
                </ul>
                <div class="pageJump">
                    <span>跳转到</span>
                    <input type="text">
                    <span>页</span>
                    <button type="button" class="button">确定</button>
                </div>
            </div>
        </div>
    </div>
</div>

<section class="model_bg"></section>
<section class="my_model">
    <p class="title">取消订单<!--<span class="closeModel">X</span>--></p>
    <p>您确认要订单吗？</p>
    <div class="opBtn">
        <a href="javascript:;" class="dialog-sure">确定</a>
        <a href="javascript:;" class="dialog-close">关闭</a>
    </div>
</section>

<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/date.js"></script>
<script>
    $(function () {
        // nav收缩展开
        $('.navMenu li a').on('click', function () {
            var parent = $(this).parent().parent(); //获取当前页签的父级的父级
            var labeul = $(this).parent("li").find(">ul")
            if ($(this).parent().hasClass('open') == false) {
                //展开未展开
                parent.find('ul').slideUp(300);
                parent.find("li").removeClass("open")
                parent.find('li a').removeClass("active").find(".icon-under").removeClass("open")
                $(this).parent("li").addClass("open").find(labeul).slideDown(300);
                $(this).addClass("active").find(".icon-under").addClass("open")
            } else {
                $(this).parent("li").removeClass("open").find(labeul).slideUp(300);
                if ($(this).parent().find("ul").length > 0) {
                    $(this).removeClass("active").find(".icon-under").removeClass("open")
                } else {
                    $(this).addClass("active")
                }
            }

        });

        // tab
        $(".tab-menu li").click(function () {
            //通过 .index()方法获取元素下标，从0开始，赋值给某个变量
            var _index = $(this).index();
            //让内容框的第 _index 个显示出来，其他的被隐藏
            $(".tab-box .tablist").eq(_index).show().siblings().hide();
            //改变选中时候的选项框的样式，移除其他几个选项的样式
            $(this).addClass("active").siblings().removeClass("active");
        });

        //日期
        $("#date").dateSelect();
        $("#date2").dateSelect();


        // 取消订单弹窗
        $('.delBtn').click(function () {
            $order_lists = $(this).parents('.order_lists');
            $order_content = $order_lists.parents('.order_content');
            $('.model_bg').fadeIn(300);
            $('.my_model').fadeIn(300);
        });
        //关闭模态框
        $('.closeModel').click(function () {
            closeM();
        });
        $('.dialog-close').click(function () {
            closeM();
        });

        function closeM() {
            $('.model_bg').fadeOut(300);
            $('.my_model').fadeOut(300);
        }

    });
</script>
</body>

</html>